/*
  学习目标： 复用组件逻辑的三种方式 - hoc
  hoc: 高阶组件
  本质： 
    1. 是一个函数，
    2. 函数内部封装一个class组件
    3. class组价封装逻辑
    4. 函数接受一个组件，作为class组件的子组件
    5. 父传子，传递封装的逻辑
*/

import React from 'react';

const MyComponent = logMouse(Main);
const MyFooter = logMouse(Footer);
const MyHeader = logMouse(Header);

export default function App() {
  return (
    <div>
      <MyHeader></MyHeader>
      <hr />
      <MyComponent></MyComponent>
      <MyFooter></MyFooter>
    </div>
  );
}

function logMouse(Child) {
  class WarpComponent extends React.Component {
    state = {
      mouse: { x: 0, y: 0 },
    };

    handleMouseMove = (e) => {
      this.setState({
        mouse: {
          x: e.clientX,
          y: e.clientY,
        },
      });
    };

    render() {
      const { mouse } = this.state;
      return <Child mouse={mouse} handleMouseMove={this.handleMouseMove}></Child>;
    }
  }

  return WarpComponent;
}

function Header({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      <h1>
        x: {mouse.x} - y: {mouse.y}
      </h1>
    </div>
  );
}

function Main({ mouse, handleMouseMove }) {
  return (
    <h1 onMouseMove={handleMouseMove}>
      Main - {mouse.x} - {mouse.y}
    </h1>
  );
}

function Footer({ mouse, handleMouseMove }) {
  return (
    <>
      <div>
        {mouse.x} -- {mouse.y}
      </div>
      <button onMouseMove={handleMouseMove}>点我</button>
    </>
  );
}
